<!-- 密码登录 -->
<template>
  <div class="main_R-c">
    <div class="nickNum">
      <input type="text" placeholder="请输入手机号码" v-model="userinfo.phoneNumber" />
      <span v-show="erruserName" style="color: red; font-size: 12px">该用户不存在或者已注销</span>
    </div>
    <div class="nickPassword">
      <input
        type="password"
        placeholder="请输入密码"
        v-model="userinfo.password"
        @keyup.enter="onceLogin"
      />
      <span v-show="errPwd" style="color: red; font-size: 12px">密码错误</span>
    </div>
    <div class="check">
      <input class="input" type="checkbox" />记住我
    </div>
    <button
      class="changeHanld isLogin"
      :class="
        userinfo.password.length !== 0 && userinfo.phoneNumber.length !== 0
          ? 'active'
          : ''
      "
      @click="onceLogin"
    >立刻登录</button>
    <div class="islogin changeHanld">
      <span class="changeHanld" @click="$router.push('/register')">立刻注册</span>
      <span class="changeHanld forget" @click="$router.push('/forget')">忘记密码</span>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { home, commonRequest, postRequest } from "../../api/api.js";
import { mapActions, mapMutations } from "vuex";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      userinfo: {
        // password: "12345678",
        // phoneNumber: "18666187888",
        password: "",
        phoneNumber: ""
      },
      erruserName: false,
      showCode: true,
      errPwd: false,
      isShowdislog: false,
      val: 60
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  // watch: {
  //   "store.state.backName"(val) {
  //     console.log(val);
  //   },
  // },
  //方法集合
  methods: {
    ...mapActions(["handleLogin"]),
    ...mapMutations(["setBackName", "setIsShow"]),
    onceLogin() {
      // let data = { password: "laity0416.", phoneNumber: "18397695585" };
      let { password, phoneNumber } = this.userinfo;
      let data = {
        password,
        phoneNumber
      };
      this.handleLogin(data).then(res => {
        if (!res) {
          this.saveTime();
          let backName = this.$store.state.backName;
          this.$message.success({
            message: backName ? "登录成功,跳转页面" : "登录成功",
            type: "success"
          });
          console.log(backName);
          if (backName) {
            setTimeout(() => {
              this.$router.back();
            }, 3000);
          } else {
            /* 有问题,待解决 */
            this.setIsShow(false);
            this.$emit("jieshou", false);
            this.$router.push("/");
          }
        } else {
          if (res.message == "该用户不存在或者已注销") {
            this.erruserName = true;
          } else {
            this.errPwd = true;
          }
        }
      });
    },
    saveTime() {
      // 没有勾选  保持一天
      let startTime = +new Date();
      let endTime = "";
      let ischecked = document.querySelector("input.input").checked;
      console.log(ischecked);
      if (ischecked) {
        // 勾选
        // endTime = startTime + 24 * 60 * 60 * 1000 * 30; // (一天的时间戳*30)
        const time = new Date().getTime() + 24 * 60 * 60 * 1000 * 7;
        localStorage.setItem("endTime", time);
      } else {
        // 没有勾选
        // endTime = startTime + 24 * 60 * 60 * 1000 * 6; // 保留一天;
        const time = new Date().getTime() + 24 * 60 * 60 * 1000 * 7;
        localStorage.setItem("endTime", time);
      }
    }
  }
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
.main_R-c {
  padding: 0 30px;
  .nickNum {
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    input {
      font-size: 16px;
    }
  }
  .nickPassword {
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    input {
      font-size: 16px;
    }
  }
  .check {
    display: flex;
    height: 50px;
    align-items: center;
    .input {
      margin-right: 10px;
    }
  }
  .isLogin {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 4px;
    font-size: 16px;
  }
  .islogin {
    height: 40px;
    align-items: center;
    display: flex;
    justify-content: space-between;
    border: none;
    font-size: 14px;
  }
  .forget {
    color: #ccc;
  }
}
</style>
